<template>
    <div>
        <Card>
             <Breadcrumb>
                <Breadcrumb-item>系统管理</Breadcrumb-item>
                <Breadcrumb-item>用户管理</Breadcrumb-item>
            </Breadcrumb>
        </Card>
       <Card  class="margin-top-5">
            <div class="margin-bottom-10">
                 <Button type="primary">新增</Button>
                 <Input v-model="search" placeholder="Enter something..." style="width: 300px"></Input>
                 <Button type="ghost" icon="ios-search">Search</Button>
            </div>
            <Table border :columns="columns" :data="pageData.data"></Table>
            <Page :total="100" style="margin-top:10px;text-align:right;" show-total>
            </Page>
       </Card>
    </div>
</template>

<script>
  export default {
        data () {
            return {
                search:'',
                columns: [
                     {type: 'selection', width: 60,align: 'center' },
                     {title: 'Name', key: 'name', render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    { title: 'Age', key: 'age'},
                    { title: 'Address',  key: 'address' },
                    { title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px'},
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                pageData: {
                    data:[],
                    size:10,
                    page:1
                }
            }
        },
        methods: {
            
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            }
        }
    }
</script>
